<template>
    <el-card class="box-card">
        <div>
            <el-form
                :model="formData"
                status-icon
                :rules="rules"
                ref="formData"
                label-width="auto"
                class="demo-formData"
                label-position="left"
                hide-required-asterisk
            >
                <el-form-item label="账号" prop="name">
                    <el-input type="text" v-model="formData.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="formData.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item class="login-button">
                    <el-button type="primary" @click="login('formData')">登录</el-button>
                    <el-button type="primary" @click="resetForm('formData')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</template>

<script>
import httpRequest from '@/api/http.js'
import token from '@/utils/token'

export default {
    data() {
        var nameValidate = (rule, value, callback) => {
            // if (value !== 'admin') {
            //     callback('账号错误')
            // } else {
            //     callback()
            // }
            callback()
        }
        var passwordValidate = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'))
            } else if (value.length < 3 || value.length > 15) {
                callback(new Error('长度在 3 到 15 个字符'))
            } else {
                callback()
            }
        }
        return {
            formData: {
                name: 'admin',
                password: 'admin@123',
            },
            rules: {
                name: [
                    { validator: nameValidate, trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                password: [{ validator: passwordValidate, trigger: 'blur' }],
            },
        }
    },
    created() {},
    methods: {
        login(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    httpRequest
                        .login({
                            account: this.formData.name,
                            password: this.formData.password,
                        })
                        .then((res) => {
                            const { data, message } = res
                            token.setSessionToken(data.token)
                            this.$router.push('index')
                            this.$message.success(message)
                        })
                } else {
                    this.$message({
                        message: '输入不符合规范',
                        type: 'error',
                    })
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
            this.formData = {}
        },
    },
}
</script>

<style lang="less" scoped>
.box-card {
    width: 50%;
    margin: 10% auto;
    padding: 20px;
}
.login-button {
    display: flex;
    margin-top: 20px;
    // justify-content: center;
}
</style>
